<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <script>
      const observer = new MutationObserver(callback);
      observer.observe(document.body, {
        childList: true, // 监测子节点的变化（元素的添加或删除）
        subtree: true // 监测子树的变化（深层元素的修改）
      });

      function callback(mutationsList) {
        let firstScreenTime = 0;
        mutationsList.forEach(mutation => {
          // 只关注DOM元素的添加和属性变化
          if ((mutation.type === 'attributes' && mutation.attributeName === 'style') || mutation.type === 'childList') {
            // 检查DOM元素的变化
            // 你可以在这里根据项目需要查找首屏元素的特定条件，比如特定的CSS类或ID
            // 页面首屏渲染完毕，首屏元素被找到，记录首屏时间
            firstScreenTime += 1;
            // 停止观察，避免重复计算首屏时间

          }
        });
        if (firstScreenTime > 0) {
          console.log(`首屏时间：${firstScreenTime}ms`);
          observer.disconnect();
          // 可以在这里执行首屏渲染完毕后的操作
        }
      }
    </script>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>
